<template>
    <div style="padding-left: 17px;">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <i class="el-icon-office-building"></i> 机构管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加机构</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="100px"
                class="demo-ruleForm"
            >
                <el-form-item label="机构名称" prop="title" style="width:350px">
                    <el-input v-model.number="ruleForm.title"></el-input>
                </el-form-item>
                <el-form-item label="联系人姓名" prop="pname" style="width:350px">
                    <el-input v-model.number="ruleForm.pname"></el-input>
                </el-form-item>
                <el-form-item label="联系人电话" prop="phone" style="width:350px">
                    <el-input v-model="ruleForm.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="机构网站" prop="website" style="width:350px">
                    <el-input v-model="ruleForm.website" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="行业类型" prop="itype" style="width:350px">
                    <el-input v-model.number="ruleForm.itype"></el-input>
                </el-form-item>
                <el-form-item label="经营项目" prop="item" style="width:350px">
                    <el-input v-model="ruleForm.item" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="注册资金" prop="fund" style="width:350px">
                    <el-input v-model="ruleForm.fund" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
                    <el-button @click="resetForm('ruleForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
import Qs from 'qs';
export default {
    name: 'baseform',
    data() {
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('内容不能为空'));
            }
            setTimeout(() => {
                if (!/^[0-9]*$/g.test(value)) {
                    callback(new Error('请输入数字'));
                } else {
                    callback();
                }
            }, 500);
        };

        return {
            //值
            ruleForm: {
                title: '', //机构名称
                pname: '', //联系人姓名
                phone: '', //联系人电话
                website: '', //机构网站
                itype: '', //行业类型
                item: '', //经营项目
                fund: '' //注册资金
            },
            //表单验证规则
            rules: {
                fund: [{ validator: checkAge, trigger: 'blur' }],
                phone: [{ validator: checkAge, trigger: 'blur' }]
            }
        };
    },

    methods: {
        //提交
        submitForm(formName) {
            this.$http
                .post(
                    '/api/api/user/instadd',
                    Qs.stringify({
                        name: $cookies.get('tokenuser'), //用户账号
                        form: $cookies.get('tokenform'), //用户身份（0公司 1机构 2客服）
                        token: $cookies.get('tokenpa').token, //当前登录令牌
                        isname: this.ruleForm.title, //机构名称
                        ispname: this.ruleForm.pname, //联系人姓名
                        isphone: this.ruleForm.phone, //联系人电话
                        iswebsite: this.ruleForm.website, //机构网站
                        isitype: this.ruleForm.itype, //行业类型
                        isitem: this.ruleForm.item, //经营项目
                        isfund: this.ruleForm.fund //注册资金
                    }),
                    { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
                )
                .then(obtain => {
                    if (obtain.body.code == 200) {
                        this.$message.success(obtain.body.msg);
                        this.$refs[formName].resetFields();
                    } else {
                        this.$message.error(obtain.body.msg);
                    }
                })
                .catch(fail => {
                    this.$message.error({
                        message: '服务器请求失败...'
                    });
                });
        }, //重置
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
};
</script>
<style  scoped>
</style>